<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="filter-container">
      <el-select v-model="listQuery.goods_status" placeholder="商品状态" clearable style="width: 120px" class="filter-item" >
        <el-option v-for="item in statusOptions" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      <el-select v-model="listQuery.sort" placeholder="选择排序" clearable style="width: 180px" class="filter-item">
        <el-option v-for="item in sortOptions" :key="item.value" :label="item.name" :value="item.value" />
      </el-select>
      <el-input v-model="listQuery.goods_name" placeholder="输入商品关键字搜索" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleFilter"/>
      <el-input v-model="listQuery.platform_name" placeholder="输入平台关键字搜索" style="width: 200px;" class="filter-item" clearable @keyup.enter.native="handleFilter"/>
      <span class="filter-label">平台价格区间</span>
      <el-input v-model="listQuery.min_platform_price" placeholder="输入最小价格" style="width: 120px;" class="filter-item" />
      -
      <el-input v-model="listQuery.max_platform_price" placeholder="输入最大价格" style="width: 120px;" class="filter-item" />
      <!-- <el-checkbox v-model="listQuery.is_robot" :true-label="1" :false-label="0" class="filter-item" style="margin:0 15px;" >
        去除机器人数据
      </el-checkbox> -->
      <el-button class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
      <el-button class="filter-item" type="primary" icon="el-icon-plus" @click="handleAdd">
        添加
      </el-button>
    </div>
    <!-- 表格 -->
    <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
      <el-table-column label="ID" width="80" align="center">
        <template slot-scope="scope">
          {{ scope.row.goods_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label=" " width="120">
        <template slot-scope="scope">
          <wish-image :src="scope.row.goods_img_url" />
        </template>
      </el-table-column>
      <el-table-column label="商品" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.goods_name }}
        </template>
      </el-table-column>
      <el-table-column label="供应链接" min-width="110" align="center">
        <template slot-scope="scope">
          <a style="color:blue;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;" :href="scope.row.platform_url" target="_blank">{{ scope.row.platform_url }}</a>
        </template>
      </el-table-column>
      <el-table-column label="市场价名称" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.platform_name }}
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" label="市场价格" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.platform_price }}
        </template>
      </el-table-column>
      <el-table-column align="center" prop="created_at" label="所需心愿值" width="100">
        <template slot-scope="scope">
          {{ scope.row.need_wish_coin }}
        </template>
      </el-table-column>
      <el-table-column label="当前库存" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.goods_stock }}
        </template>
      </el-table-column>
      <el-table-column label="浏览次数" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.visit_num }}
        </template>
      </el-table-column>
      <el-table-column label="发起次数" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.initiate_num }}
        </template>
      </el-table-column>
      <el-table-column label="成单次数" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.success_num }}
        </template>
      </el-table-column>
      <el-table-column label="状态" width="110" align="center">
        <template slot-scope="scope">
          {{ scope.row.goods_status | statusFilter }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleEdit(scope.row)">
            编辑/查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.page_size" @pagination="fetchData"/>
    <!-- 弹窗 -->
    <el-dialog title="商品详情" top="5vh" :visible.sync="detailVisible" width="950px" custom-class="detail-dialog" :close-on-click-modal="false" @close="onDetailClose">
      <el-form ref="detailForm" :model="detailForm" :rules="detailFormRules" size="mini" class="dialog-content">
        <div class="left-content">
          <el-form-item label="缩略图" prop="goods_img_url">
            <wish-upload v-model="detailForm.goods_img_url" class="avatar-uploader" path="goods/goods_img" :list="false" >
              <img v-if="detailForm.goods_img_url" :src="detailForm.goods_img_url" class="avatar" >
              <i v-else class="el-icon-plus avatar-uploader-icon"/>
            </wish-upload>
          </el-form-item>
          <el-form-item label="头部轮播图" prop="introduce_carousel_info">
            <wish-upload v-model="detailForm.introduce_carousel_info" path="goods/introduce_carousel" :show="detailVisible" show-clear>
              <el-button size="small" type="primary">添加</el-button>
              <!-- <div slot="tip" class="wish-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </wish-upload>
          </el-form-item>
          <el-form-item label="详情图" prop="introduce_content_info">
            <wish-upload v-model="detailForm.introduce_content_info" path="goods/introduce_content" :show="detailVisible" show-clear>
              <el-button size="small" type="primary">添加</el-button>
              <!-- <div slot="tip" class="wish-upload__tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </wish-upload>
          </el-form-item>
        </div>
        <div class="right-content">
          <el-form-item label="商品名称" prop="goods_name">
            <el-input v-model="detailForm.goods_name"/>
          </el-form-item>
          <div class="formitem-inline">
            <el-form-item label="市场价名称" prop="platform_name">
              <el-input v-model="detailForm.platform_name"/>
            </el-form-item>
            <el-form-item label="市场价格" prop="platform_price">
              <el-input v-model="detailForm.platform_price"/>
            </el-form-item>
            <el-form-item label="心愿值价格" prop="need_wish_coin">
              <el-input v-model="detailForm.need_wish_coin"/>
            </el-form-item>
            <el-form-item label="成单人数" prop="need_people">
              <el-input v-model="detailForm.need_people"/>
            </el-form-item>
          </div>
          <div class="formitem-inline">
            <el-form-item label="是否展示市场价" prop="show_platform_price" required>
              <el-select v-model="detailForm.show_platform_price" placeholder="商品状态">
                <el-option key="1" label="是" :value="1"/>
                <el-option key="0" label="否" :value="0"/>
              </el-select>
            </el-form-item>
            <el-form-item label="是否新用户免费支持" prop="can_free" required>
              <el-select v-model="detailForm.can_free" placeholder="商品状态">
                <el-option key="1" label="是" :value="1"/>
                <el-option key="0" label="否" :value="0"/>
              </el-select>
            </el-form-item>
          </div>
          <div class="formitem-inline">
            <el-form-item label="库存" prop="goods_stock">
              <el-input v-model="detailForm.goods_stock"/>
            </el-form-item>
            <el-form-item label="状态设置" prop="goods_status" required style="flex:1.2">
              <el-select v-model="detailForm.goods_status" placeholder="商品状态">
                <el-option v-for="item in proDetailStatusOptions" :key="item.value" :label="item.name" :value="item.value"/>
              </el-select>
            </el-form-item>
            <el-form-item label="排序值" prop="sort_num" >
              <el-input v-model="detailForm.sort_num"/>
            </el-form-item>
          </div>
          <el-form-item label="推荐文案" prop="goods_title">
            <el-input v-model="detailForm.goods_title"/>
          </el-form-item>
          <el-form-item label="版本">
            <el-input v-model="detailForm.goods_specification" placeholder="多个标签用,隔开"/>
          </el-form-item>
          <el-form-item label="标签">
            <el-input v-model="detailForm.goods_label" placeholder="多个标签用,隔开"/>
          </el-form-item>
          <el-form-item label="渠道商家链接" prop="platform_url">
            <el-input v-model="detailForm.platform_url"/>
          </el-form-item>
          <div class="formitem-inline2">
            <el-form-item label="发起次数" prop="initiate_num">
              <el-input v-model="detailForm.initiate_num" disabled/>
            </el-form-item>
            <el-form-item label="成单次数" prop="success_num">
              <el-input v-model="detailForm.success_num" disabled/>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button v-show="isEdit" @click="delProduct">删除商品</el-button> -->
        <el-button type="primary" @click="saveDetail">{{ isEdit?'保存':'新增' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mergeObj, objRemove } from '@/utils'
import { mapGetters } from 'vuex'
import defaultSetting from '@/settings'
import { getProductList, addProduct, editProduct } from '@/api/product'
import WishUpload from '@/components/Upload'
import WishImage from '@/components/Image'
import Pagination from '@/components/Pagination'
import { proStatusOptions, proDetailStatusOptions, proSortOptions } from '@/constant/options'
const form = {
  goods_id: '',
  goods_name: '',
  platform_name: '',
  platform_price: '',
  need_wish_coin: '',
  need_people: 0,
  goods_stock: 0,
  show_platform_price: 0,
  can_free: 0,
  platform_url: '',
  goods_title: '',
  goods_status: null,
  initiate_num: 0,
  success_num: 0,
  goods_img_url: '',
  introduce_carousel_info: [],
  introduce_content_info: [],
  sort_num: '',
  goods_label: '',
  goods_specification: ''
}
export default {
  name: 'ProductManage',
  components: { WishImage, Pagination, WishUpload },
  filters: {
    statusFilter(value) {
      const status = proDetailStatusOptions.find(item => item.value === value)
      return status ? status.name : '未定义'
    }
  },
  data() {
    return {
      defaultSetting,
      list: null,
      listLoading: true,
      listQuery: {
        page: 1,
        page_size: 15,
        goods_status: -1,
        goods_name: '',
        sort: '',
        is_robot: 0,
        platform_name: '',
        min_platform_price: '',
        max_platform_price: ''
      },
      statusOptions: proStatusOptions,
      proDetailStatusOptions,
      sortOptions: proSortOptions,
      isRobot: false,
      total: 0,
      detailVisible: false,
      imageUrl: '',
      detailForm: {
        ...form
      },
      detailFormRules: {
        goods_name: [{ required: true, message: '请输入商品名称', trigger: 'blur' }],
        platform_name: [{ required: true, message: '请输入市场价名称', trigger: 'blur' }],
        platform_price: [{ required: true, message: '请输入市场价格', trigger: 'blur' }],
        need_wish_coin: [{ required: true, message: '请输入价格', trigger: 'blur' }],
        goods_status: [{ required: true, message: '请选择状态', trigger: 'blur' }],
        can_free: [{ required: true, message: '请选择', trigger: 'blur' }],
        show_platform_price: [{ required: true, message: '请选择', trigger: 'blur' }],
        need_people: [{ required: true, message: '请输入人数', trigger: 'blur' }],
        goods_stock: [{ required: true, message: '请输入库存', trigger: 'blur' }],
        sort_num: [{ required: true, message: '请输入排序', trigger: 'blur' }],
        platform_url: [{ required: true, message: '请输入地址', trigger: 'blur' }],
        goods_img_url: [{ required: true, message: '请上传缩略图', trigger: 'blur' }],
        introduce_carousel_info: [{ required: true, type: 'array', message: '请上传头部轮播图', trigger: 'blur' }],
        introduce_content_info: [{ required: true, type: 'array', message: '请上传详情图', trigger: 'blur' }]
      },
      isEdit: false
    }
  },
  computed: {
    ...mapGetters([
      'token'
    ])
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getProductList(objRemove(this.listQuery)).then(res => {
        this.list = res.data.data
        this.total = res.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleEdit(row) {
      this.isEdit = true
      this.detailForm = mergeObj(this.detailForm, row)
      this.detailVisible = true
    },
    handleAdd() {
      this.isEdit = false
      this.detailVisible = true
    },
    delProduct() {
      this.$confirm('删除后该商品信息将无法找回，请确认', '确认删除', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.detailVisible = false
      }).catch(() => {
      })
    },
    saveDetail() {
      this.$refs.detailForm.validate((valid) => {
        if (valid) {
          this.$confirm('保存后当前设置将立即生效，请认真检查', '确认保存', {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(async() => {
            const action = this.isEdit ? editProduct : addProduct
            await action(this.detailForm)
            this.$message({
              message: '操作成功',
              type: 'success'
            })
            this.detailVisible = false
            this.fetchData()
          }).catch(() => {
          })
          console.log('valid success')
        } else {
          console.log('valid fail')
        }
      })
    },
    onDetailClose() {
      this.$refs.detailForm.resetFields()
      this.detailForm = { ...form }
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .detail-dialog{
  .el-dialog__body{
    padding: 10px 20px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 150px;
    height: 150px;
    line-height: 150px;
    text-align: center;
  }
  .avatar {
    width: 150px;
    height: 150px;
    display: block;
  }
}

.dialog-content{
  display: flex;

}
.left-content{
  width: 350px;
  padding-right: 30px;
  border-right:1px solid #bbb;
  max-height: 670px;
  overflow: auto;
}
.right-content{
  flex:1;
  padding: 0px 43px 0px 43px;
  max-height: 670px;
  overflow: auto;
}
.formitem-inline{
  display: flex;
  .el-form-item{
    flex:1;
  }
  .el-form-item:not(:last-child){
    margin-right: 30px;
  }
}

.formitem-inline2{
  display: flex;
  .el-form-item{
    flex:1;
  }
  .el-form-item:not(:last-child){
    margin-right: 80px;
  }
  // .float-100{
  //   float: left;
  //   width: 100%;
  // }
}
</style>
